import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType, filter } from 'graphql-anywhere';
import { StyleSheet, FlatList, TouchableOpacity, Text, ScrollView } from 'react-native';
import { Button, List, ListItem } from 'react-native-elements';
import { primaryColor } from '../utils'; 

const styles = StyleSheet.create({
  text: { 
    color: '#86939e',
    paddingHorizontal: 12,
    paddingVertical: 14
  },
  selectContainer: {
    backgroundColor: '#F5F5F5',
    borderBottomColor: primaryColor,
    borderBottomWidth: 2
  },
  list: {
    marginTop: 0
  }
});

const StoreList = ({stores, loading, onSelect}) => (
  <ScrollView>
    <List containerStyle={styles.list}>
      <ListItem leftIcon={{name:'add'}} title='New Store' hideChevron onPress={()=>onSelect()}/>
      {stores&&stores.map((store, index) => <ListItem key={index} title={store.title}
        leftIcon={{name:store.type==='Bag'?'pages':'local-offer',color:primaryColor}} onPress={()=>onSelect(store)}/>)}
    </List>
  </ScrollView>
);

export default graphql(gql`
  query StoreList {
    stores {
      id
      title
      type
    }
  }
`, {
  props: ({ownProps, data:{stores, loading}}) => {
    return {
      stores,
      loading
    };
  }
})(StoreList);


